var imgWidth = null;
var bannerIndex = 1;
var imgNum = 6;
var flag = true;
var timer = null;
var newCooperate = cooperate;

function init() {
    showBanner();
    showCards(pagination(18, 1, cooperate));
    showPages(cooperate);
    showNews();
    interval();
}

function showBanner() {
    var leftStr = "";
    var contentStr = "";
    var rightStr = "";
    for (var i = 0; i < imgNum + 2; i++) {
        leftStr += `<a class="bannerImg" href="javascript:void(0);"><img src="${banner[order[0][i]].url}"><div class="mask">${banner[order[0][i]].title}</div></a>`;
        contentStr += `<a class="bannerImg" href="javascript:void(0);"><img src="${banner[order[1][i]].url}"><div class="mask">${banner[order[1][i]].title}</div></a>`;
        rightStr += `<a class="bannerImg" href="javascript:void(0);"><img src="${banner[order[2][i]].url}"><div class="mask">${banner[order[2][i]].title}</div></a>`
    }
    $(".banner .bannerLeft .bannerList").html(leftStr);
    $(".banner .bannerContent .bannerList").html(contentStr);
    $(".banner .bannerRight .bannerList").html(rightStr);
    imgWidth = $(".banner img").width();
    $(".banner .bannerList").css("transform", "translateX( " + -imgWidth + "px )");
}

function interval() {
    clearInterval(timer);
    timer = setInterval(function () {
        $(".banner .next").click();
    }, 3000);
}

function pagination(pageSize, currentPage, arr) {
    var skipNum = (currentPage - 1) * pageSize;
    var newArr = (skipNum + pageSize >= arr.length) ? arr.slice(skipNum, arr.length) : arr.slice(skipNum, skipNum + pageSize);
    return newArr;
}

function showCards(arr) {
    var cardsStr = "";
    for (var i = 0; i < arr.length; i++) {
        if (arr[i].more != "") {
            cardsStr += `
                        <div class="card">
                            <div class="imgBox">
                                <img src="${arr[i].url}">
                            </div>
                            <div class="info">
                                ${arr[i].title}
                                <div class="more">
                                    查看更多
                                    <div class="moreBox">${arr[i].more}<i></i></div>
                                </div>
                            </div>
                            <div class="tag">${arr[i].tag}</div>
                        </div>`;
        } else {
            cardsStr += `
                        <div class="card">
                            <div class="imgBox">
                                <img src="${arr[i].url}">
                            </div>
                            <div class="info">
                                ${arr[i].title}
                            </div>
                            <div class="tag">${arr[i].tag}</div>
                        </div>`;
        }
    }
    $(".cooperate .cards").html(cardsStr);
    for (var j = 0; j < arr.length; j++) {
        if (arr[j].state === 1) {
            var topI = `<i class="top">置顶</i>`;
            $(".cooperate .imgBox").eq(j).append(topI);
        }
    }
}

function showNews() {
    var newsStr = "";
    for (var i = 0; i < news.length; i++) {
        if (news[i].state === 1) {
            newsStr += `
                        <li class="newsItem clearfix">
                            <div class="title f-left"><span class="top">置顶</span>${news[i].title}</div>
                            <div class="time f-right">${news[i].date}</div>
                        </li>`;
        } else {
            newsStr += `
                        <li class="newsItem clearfix">
                            <div class="title f-left">${news[i].title}</div>
                            <div class="time f-right">${news[i].date}</div>
                        </li>`;
        }
    }
    $(".news .newsList").html(newsStr);
};

function showPages(arr) {
    if (arr.length < 18) {
        $(".pages").hide();
    } else {
        $(".pages").show();
        var pagesStr = "";
        for (var i = 1; i <= Math.ceil(arr.length / 18); i++) {
            pagesStr += `<li class="num">${i}</li>`
        }
        $(".pageNum").html(pagesStr);
        $(".pageNum .num").eq(0).addClass("active");
        $(".pagePrve").addClass("disabled");
    }
}

$(".banner .prev").on("click", function () {
    if (flag) {
        flag = false;
        bannerIndex--;
        $(".banner .bannerList").css({
            "transform": "translateX( " + -bannerIndex * imgWidth + "px )",
            "transition": "all 0.5s"
        });
    };
});

$(".banner .next").on("click", function () {
    if (flag) {
        flag = false;
        bannerIndex++;
        $(".banner .bannerList").css({
            "transform": "translateX( " + -bannerIndex * imgWidth + "px )",
            "transition": "all 0.5s"
        });
    };
})

$(".banner .bannerList").on("transitionend", function () {
    if (bannerIndex >= imgNum + 1) {
        bannerIndex = 1;

        $(".banner .bannerList").css({
            "transform": "translateX( " + -bannerIndex * imgWidth + "px )",
            "transition": "none"
        });
    } else if (bannerIndex <= 0) {
        bannerIndex = imgNum;

        $(".banner .bannerList").css({
            "transform": "translateX( " + -bannerIndex * imgWidth + "px )",
            "transition": "none"
        });
    }
    flag = true;
});

$(".banner .bannerBox").hover(function () {
    clearInterval(timer);
}, function () {
    interval();
});

$(".navList").on("click", "li", function () {
    $(this).addClass("active").siblings("li").removeClass("active");
    var arr = [];
    if ($(this).index() === 0) {
        showCards(pagination(18, 1, cooperate));
        showPages(cooperate);
        newCooperate = cooperate;
    } else {
        for (var i = 0; i < cooperate.length; i++) {
            if (cooperate[i].type === $(this).index()) {
                arr.push(cooperate[i]);
            }
        }
        showCards(pagination(18, 1, arr));
        showPages(arr);
        newCooperate = arr;
    }
});

$(".pagePrve").on("click", function () {
    var i = $(".pageNum .active").index();
    if (i > 0) {
        i--;
        $(".pageNext").removeClass("disabled");
        $(".pageNum .num").eq(i).addClass("active").siblings("li").removeClass("active");
        showCards(pagination(18, i + 1, newCooperate));
    }
    if (i == 0) {
        $(this).addClass("disabled");
    }
});

$(".pageNext").on("click", function () {
    var i = $(".pageNum .active").index();
    if (i < $(".pageNum .num").length - 1) {
        i++;
        $(".pagePrve").removeClass("disabled");
        $(".pageNum .num").eq(i).addClass("active").siblings("li").removeClass("active");
        showCards(pagination(18, i + 1, newCooperate));
    }
    if (i == $(".pageNum .num").length - 1) {
        $(this).addClass("disabled");
    }
});

$(".pageNum").on("click", ".num", function () {
    $(this).addClass("active").siblings("li").removeClass("active");
    showCards(pagination(18, $(this).index() + 1, newCooperate));
    if ($(this).index() == 0) {
        $(".pagePrve").addClass("disabled");
        $(".pageNext").removeClass("disabled");
    } else if ($(this).index() == $(".pageNum .num").length - 1) {
        $(".pageNext").addClass("disabled");
        $(".pagePrve").removeClass("disabled");
    } else {
        $(".pagePrve").removeClass("disabled");
        $(".pageNext").removeClass("disabled");
    }
});

init();